<template>
    <div class="list-tasks app-container">
      <el-table :data="dataList" :v-loading="isLoading" border style="width: 100%" class="workorder-table">
        <el-table-column sortable align="center" prop="id" label="ID"></el-table-column>
        <el-table-column sortable align="center" min-width="120" prop="name" label="任务"></el-table-column>
        <el-table-column sortable align="center" min-width="100" prop="playbook" label="playbook"></el-table-column>
        <el-table-column sortable align="center" min-width="100" prop="detail_result" label="执行结果"></el-table-column>
        <el-table-column sortable align="center" min-width="110" prop="status" label="状态">
        </el-table-column>
        <el-table-column sortable align="center" min-width="160" prop="add_time" label="创建时间"></el-table-column>
        <el-table-column sortable align="center" min-width="160" prop="exec_time" label="执行时间"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleClick(scope.row)">处理</el-button>
            <el-button size="mini" type="text" @click="handleCancel(scope.row)">放弃</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--模态窗-->
      <el-dialog
        title="任务详情"
        :visible.sync="dialogVisibleForTask"
        width="70%">
        <div><pre>{{exce_result}}</pre></div>
      </el-dialog>

      <!-- 分页 -->
      <div class="pageination" v-show="total>5">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="params.page"
          :page-size="params.page_size"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
  import { getTaskList } from '@/api/tasks'

  export default {
    name: 'list-tasks',
    data() {
      return {
        dialogVisibleForTask: false,
        isLoading: false,
        dataList: [],
        total: 0,
        params: {
          page: 1,
          page_size: 10,
          search: ''
        },
        status: [
          { value: 0, text: '未完成', color: 'info' },
          { value: 1, text: '处理中', color: 'primary' }
        ]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 改变页码和页面大小时获取对应的数据
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      handleSizeChange(val) {
        this.params.page_size = val
        this.fetchData()
      },
      fetchData() {
        this.isLoading = true
        getTaskList(this.params).then(res => {
          this.dataList = res.results
          this.total = res.count
          this.isLoading = false
        }).catch(() => {
          this.$message.error('获取任务列表失败')
        })
      },
      handleClick() {
      },
      handleCancel() {
      }
    }
  }
</script>

<style lang="scss" scoped>
    .list-tasks {
    }
</style>
